<style>
    .contain[page_index] {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: stretch;

    }

    .contain[page_index] .item {
        padding: 1em;
        margin: 0 1em;
        border: 1px solid gray;

        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .contain[page_index] .item>* {
        cursor: default;
    }

    .contain[page_index] .item:hover {
        background-color: #25a1c0;
        color: black;
    }

    .contain[page_index] .item:last-child {}

    .contain[page_index] .item button {
        margin: 0 0.5em;
    }
</style>


<dom>
    <div class="contain" page_index>
        <div class="item" style="flex-direction: column;align-items: flex-start;">
            <span>page_index.ts</span>
            <span>page_index.prefab.html</span>
            <span>这是一个FrontForge页面。</span>
        </div>
        <div class="item">
            <span>按钮</span>
            <button name="toast">TOAST</button>
            <button name="msgbox">MSG_BOX</button>
        </div>
        <div class="item">
            <label>拖动</label>
            <input name="count" type="range" min="0" max="100" step="1" value="0" style="flex-grow: 1;margin:0 2em;" />
            <span name="count">0</span>
        </div>
        <div class="item">
            <label>选项</label>
            <select name="type" style="flex-grow: 1;margin:0 2em;">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
            <span>你选择了：</span>
            <span name="type">1</span>
        </div>
        <div class="item">
            <label>单选</label>
            <div style="flex-grow: 1;margin-left:2em;display: flex;">
                <div>1<input name="single" type="radio" value="1" /></div>
                <div>2<input name="single" type="radio" value="2" /></div>
                <div>3<input name="single" type="radio" value="3" /></div>
                <div>4<input name="single" type="radio" value="4" /></div>
            </div>
            <span>你选择了：</span>
            <span name="single">0</span>
        </div>
        <div class="item">
            <label>多选</label>
            <div style="flex-grow: 1;margin-left:2em;display: flex;">
                <div>1<input name="muti" type="checkbox" value="1" /></div>
                <div>2<input name="muti" type="checkbox" value="2" /></div>
                <div>3<input name="muti" type="checkbox" value="3" /></div>
                <div>4<input name="muti" type="checkbox" value="4" /></div>
                <div>4<input name="muti" type="checkbox" value="5" /></div>
                <div>4<input name="muti" type="checkbox" value="6" /></div>
            </div>
            <span>你选择了：</span>
            <span name="muti"></span>
        </div>
        <div class="item">
            <label>输入框</label>
            <input name="eb" value="" style="flex-grow: 1;margin:0 2em;" />
            <span>你输入了：</span>
            <span name="eb"></span>
        </div>
        <div class="item" style="flex-direction: column;">
            <div>
                <label>元素/容器</label>
                <button name="stuff_add">+</button>
            </div>
            <div name="stuff_contain" style="display:flex;flex-direction: row; flex-wrap: wrap;">

            </div>
        </div>
    </div>
</dom>